<!DOCTYPE HTML>
<html>

<head>
    <title>JSON Editor Online - Documentation</title>
    <link href="doc.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="container">
        <h1 id="documentation">JSON Editor Online - Documentation</h1>

        <h2 id="introduction">Introduction</h2>
        <p>
            JSON Editor Online is a web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable treeview and in a code editor.
        </p>
        <p>
            Supported browsers: Chrome, Firefox, Safari, Edge, Internet Explorer 11.
        </p>
        <p>
            Website: <a href="//mocobk.gitee.io/jsoneditor" target="_blank">
    https://mocobk.gitee.io/jsoneditor</a>.
        </p>
        <p>
            Contents:
        </p>
        <ul>
            <li><a href="#main_menu">Main menu</a></li>
            <li><a href="#panels">Panels</a></li>
            <li><a href="#code_editor">Code editor</a></li>
            <li><a href="#tree_editor">Tree editor</a></li>
            <li><a href="#query_parameters">Query parameters</a></li>
            <li><a href="#shortcut_keys">Shortcut keys</a></li>
        </ul>

        <h2 id="main_menu">Main menu</h2>
        <p>
            The applications main menu contains options to clear, load and save the JSON contents of the application. Files can be loaded from disk (via menu or drag and drop), url, or online, and can be saved online or to disk. Please note that due to security restrictions,
            the application can only open urls from public websites, not from an intranet. The data policy is described <a href="//mocobk.gitee.io/jsoneditor/datapolicy.txt">here</a>.
        </p>
        <img src="img/main_menu.png" alt="Main menu">

        <h3 id="online">Loading and saving documents in the cloud</h3>

        <p>
            Documents can be saved online by clicking menu <i>Save</i>, <i>save online</i>. Online saved documents can be loaded (and shared with others) via their url. This url looks like:
        </p>

        <p>
            To open a saved document, go to menu <i>Open</i>. This menu contains a list with all saved documents. Documents can be deleted here too by clicking the cross right of the document name. Note that the list with documents is stored in the browsers
            local storage. When reinstalling your browser or clearing all browser data, this list will be gone.
        </p>

        <p>
            Online saved documents have a name, which is displayed in the top left of the application. The name can be changed by clicking it, this will open a dialog where a new name can be entered.
        </p>
        <img src="img/document_name.png" alt="Main menu">

        <h3 id="url">Loading and saving document from a custom url</h3>

        <p>
            Via menu <i>Open</i>, <i>Open url</i>, one can open an arbitrary url into JSON Editor Online. This url must be publicly accessible (<a href="https://www.wikiwand.com/en/Cross-origin_resource_sharing" target="_blank">CORS</a> must be enabled
            for https://mocobk.gitee.io/jsoneditor, and no credentials or tokens must be required).
        </p>

        <p>
            Saving a document to an arbitrary url can via menu <i>Save</i>, <i>Save to url</i>. As with loading from url, the url must be publicly accessible. JSONEditor will send an HTTP POST request to the selected url, with the JSON document in the
            body of the request.
        </p>

        <h3 id="settings">Settings</h3>

        <img src="img/settings.png" alt="Settings menu" style="float: right; padding-left: 20px;">
        <p>
            In the settings, one can specify an indentation and JSON schema validation.
        </p>

        <ul>
            <li>
                <h4>Indentation</h4>
                <p>
                    Indentation in the left panel (code editor) can be configured. The indentation is 2 spaces by default. Indentation is only applied after formatting the code again (button "Format").
                </p>
            </li>
            <li>
                <h4>JSON Schema validation</h4>
                <p>
                    To validate the structure of a JSON document against a JSON schema. As schema, you can either select one of your own online stored documents, or select a public url (like <a href="https://mocobk.gitee.io/jsoneditor/test/schema.json" target="_blank">/test/schema.json</a>).
                    When a schema is specified, JSON Editor will show validation errors when the structure of your document does not conform the schema. More information on JSON schema validation can be found on <a href="https://json-schema.org/" target="_blank">http://json-schema.org/</a>.

                    <img src="img/schema_warning.png">
                </p>
            </li>
        </ul>


        <h2 id="panels">Panels</h2>
        <p>
            The application contains two panels: a <b>code editor</b> on the left, and a <b>Tree Editor</b> on the right.
        </p>
        <p>
            There is a splitter between the two panels, allowing to change the width of both panels according to ones needs. To copy the contents from one panel to an other, the two copy buttons between the panels can be used.
        </p>
        <img src="img/splitter.png">

        <h2 id="code_editor"> Code editor</h2>
        <p>
            The code editor displays JSON data in a code editor. The editor is capable of formatting, compacting, and inspecting JSON.
        </p>
        <img src="img/code_editor.png">
        <p>
            The menu of the code editor contains the following buttons:
        </p>
        <ul>
            <li>
                <b>Format</b>. Format the JSON data, make the data readable by applying indentation and returns.
            </li>
            <li>
                <b>Compact</b>. Compact the JSON data, remove all unnecessary characters like whitespaces and returns.
            </li>
        </ul>

        <h2 id="tree_editor">Tree editor</h2>
        <p>
            The Tree editor displays the JSON data in an editable tree. The editor makes it easy to create, duplicate, remove fields, and to edit the contents of the fields.
        </p>
        <img src="img/tree_editor.png">
        <p>
            The menu of the tree editor contains the following functions:
        </p>
        <ul>
            <li>
                <b>Expand all</b>. Expand all fields in the editor.
            </li>
            <li>
                <b>Collapse all</b>. Collapse all fields in the editor.
            </li>
            <li>
                <b>Undo</b>. Undo last action.
            </li>
            <li>
                <b>Redo</b>. Redo last action.
            </li>
            <li>
                <b>Search</b>. Search for text in the tree editor. Search results will be highlighted, and can be iterated by repeatedly pressing Enter or Shift+Enter. The right side of the search box two buttons to go to the next or previous search result.
            </li>
        </ul>

        <p>
            The field values in the editor are editable input fields. The fields can be dragged up and down using the dragarea
            <img src="img/button_dragarea.png" class="icon"> on the left side of the fields. When a field is the last item of the childs of an array or object, the field can also be dragged horizontally to move it in or out of the array or object.
        </p>
        <img src="img/actions_menu.png" align="right" style="padding-left: 20px;">
        <p>
            Right from the dragarea is a button
            <img src="img/button_actions_menu.png" class="icon"> to open the <b>actions menu</b>. Depending on the type of field, the following functionality is available in the actions menu:
        </p>
        <ul>
            <li>
                <b>Type</b>. Change the type of the field. Choose from:
                <ul>
                    <li>
                        <b>auto</b> The field type is automatically determined from the value and can be a string, number, boolean, or null.
                    </li>
                    <li>
                        <b>object</b> An unordered set of key/value pairs.
                    </li>
                    <li>
                        <b>array</b> An ordered collection of values.
                    </li>
                    <li>
                        <b>string</b> Field type is not determined from the value, but always returned as string.
                    </li>
                </ul>
            </li>
            <li>
                <b>Sort</b>. Sort the childs of an array or object. For an array, the values of the childs will be sorted. In case of an object, the childs will be sorted by key. Arrays and objects can be sorted ascending or descending.
            </li>
            <li>
                <b>Insert</b>. Insert a new field before current field. Available types are auto (default), object, array, and string.
            </li>
            <li>
                <b>Append</b>. Insert a new field after current field. Available types are the same as the insert action.
            </li>
            <li>
                <b>Duplicate</b>. Duplicate the field including all childs.
            </li>
            <li>
                <b>Remove</b>. Remove the field including all childs.
            </li>
        </ul>

        <h2 id="query_parameters">Query parameters</h2>

        <p>
            To automatically load a JSON document when opening the JSON Editor, the query parameters <code>id</code>, <code>url</code>, and <code>json</code> can be used:
        </p>
        <ul>
            <li>
                <p>
                    To load an online stored document via it's id, add a query parameter named <code>id</code> to the url, having the documents id as value:
                </p>
                <a href="//mocobk.gitee.io/jsoneditor/?id=1aad4e2234c17c7f243c1faf4f5d3363">https://mocobk.gitee.io/jsoneditor/?id=1aad4e2234c17c7f243c1faf4f5d3363</a>
            </li>
            <li>
                <p>
                    To load a JSON document from a query parameter, add a query parameter named <code>json</code> with the JSON document as value:
                </p>
                <p>
                    <a href="//mocobk.gitee.io/jsoneditor/?json={%22name%22:%22John%22,%22age%22:32}">https://mocobk.gitee.io/jsoneditor/?json={%22name%22:%22John%22,%22age%22:32}</a><br>
                </p>
                <p>
                    Note that the document must be <a href="https://en.wikipedia.org/wiki/Query_string">url-encoded</a>. Furthermore, the total length of an url is limited (a safe maximum is 2048 characters), so it's not possible to store large documents
                    in a query parameter.
                </p>
            </li>
            <li>
                <p>
                    To load a JSON document from an url, add a query parameter named <code>url</code> with the url of the document to be loaded as value:
                </p>
                <p>
                    <a href="//mocobk.gitee.io/jsoneditor/?url=https://mocobk.gitee.io/jsoneditor/test/example.json">https://mocobk.gitee.io/jsoneditor/?url=http://mocobk.gitee.io/jsoneditor/test/example.json</a>
                </p>
                <p>
                    Note that the JSON document must be publicly available (<a href="https://www.wikiwand.com/en/Cross-origin_resource_sharing" target="_blank">CORS</a> must be enabled for http://mocobk.gitee.io/jsoneditor, and no credentials or tokens must
                    be required).
                </p>
            </li>
        </ul>

        <h2 id="shortcut_keys">Shortcut keys</h2>
        <p>
            The tree editor supports shortcut keys for all available actions. The editor can be used by just a keyboard. The following short cut keys are available:
        </p>

        <h3 id="global_keys">Global</h3>

        <table>
            <tr>
                <th>Key</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>Ctrl+S</td>
                <td>Save the current document online.</td>
            </tr>
            <tr>
                <td>Ctrl+&gt;</td>
                <td>Copy code from the left panel to the right panel, and move the focus to the right panel.</td>
            </tr>
            <tr>
                <td>Ctrl+&lt;</td>
                <td>Copy code from the the right panel to left panel, and move the focus to the left panel.</td>
            </tr>
        </table>

        <h3 id="tree_editor_keys">Tree editor</h3>

        <table>
            <tr>
                <th>Key</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>Alt+Arrows</td>
                <td>Move the caret up/down/left/right between fields</td>
            </tr>
            <tr>
                <td>Shift+Arrow Up/Down</td>
                <td>Select multiple fields</td>
            </tr>
            <tr>
                <td>Shift+Alt+Arrows</td>
                <td>Move field up/down/left/right</td>
            </tr>
            <tr>
                <td>Ctrl+D</td>
                <td>Duplicate field</td>
            </tr>
            <tr>
                <td>Ctrl+Del</td>
                <td>Remove field</td>
            </tr>
            <tr>
                <td>Ctrl+Enter</td>
                <td>Open link when on a field containing an url</td>
            </tr>
            <tr>
                <td>Ctrl+Ins</td>
                <td>Insert a new field with type auto</td>
            </tr>
            <tr>
                <td>Ctrl+Shift+Ins</td>
                <td>Append a new field with type auto</td>
            </tr>
            <tr>
                <td>Ctrl+E</td>
                <td>Expand or collapse field</td>
            </tr>
            <tr>
                <td>Alt+End</td>
                <td>Move the caret to the last field</td>
            </tr>
            <tr>
                <td>Ctrl+F</td>
                <td>Find</td>
            </tr>
            <tr>
                <td>F3, Ctrl+G<br></td>
                <td>Find next</td>
            </tr>
            <tr>
                <td>Shift+F3, Ctrl+Shift+G</td>
                <td>Find previous</td>
            </tr>
            <tr>
                <td>Alt+Home</td>
                <td>Move the caret to the first field</td>
            </tr>
            <tr>
                <td>Ctrl+M</td>
                <td>Show actions menu</td>
            </tr>
            <tr>
                <td>Ctrl+Z</td>
                <td>Undo last action</td>
            </tr>
            <tr>
                <td>Ctrl+Shift+Z</td>
                <td>Redo</td>
            </tr>
        </table>

        <h3 id="code_editor_keys">Code editor</h3>

        <p>
            The code editor is powered by <a href="http://ace.c9.io/">Ace Editor</a>. This editor's shortcut keys are described here:
        </p>
        <p>
            <a href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts
">https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts</a>
        </p>
        <p>
            Additionally, there are shortcut keys to format/compact the code:
        </p>
        <table>
            <tr>
                <th>Key</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>Ctrl+\</td>
                <td>Format JSON data, set proper indentation</td>
            </tr>
            <tr>
                <td>Ctrl+Shift+\</td>
                <td>Compact JSON data, remove all whitespace</td>
            </tr>
        </table>

        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

            ga('create', 'UA-42777816-3', 'auto');
            ga('send', 'pageview');
        </script>

    </div>
</body>

</html>